/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
 /* eslint-disable */
<template>
  <div class='dutyRoute-routeCard' v-show='isShow'>
            <div class='intersection-container'>
              <intersection-with-interface
                ref='intersectionWithInterface'
                :isShowState='isShowState'
                :isShowMode='isShowMode'
                :AgentId='node.agentid'
                roadDirection='left'
                @getTscControl='getTscControl'
              ></intersection-with-interface>
            </div>
            <div class='pattern-container' v-if='true'>
            <!-- pattern list start -->
            <!-- 没ring数据显示方案图 -->
            <pattern-list
              v-if="controlData&&!controlData.rings&&contrloType==='ring'&&!controlData.syncTime || controlData&&!controlData.rings&&contrloType==='ring'"
              :showBarrier="true"
              :contrloType="contrloType"
              :syncTime="controlData.syncTime"
              :patternStatusList="patterData?patterData.rings:[]"
              :cycles="patterData?patterData.cycle:0"
              :isPhase="false"
              :phaseList="phaseList"
              >
              </pattern-list>
            <!-- 1049没ring数据显示阶段图 -->
              <pattern-list
                v-else-if="controlData&&!controlData.rings&&contrloType==='stage'"
                ref="boardCard"
                :stagesChange="patterData?patterData.stagesList:[]"
                :contrloType="contrloType"
                :controlData="controlData"
                :cycles="patterData?patterData.cycle:0"
                :syncTime="controlData.syncTime"
                :localPatternList="allPatternList"
                :showBarrier="true"
                :isPhase="false"
                :phaseList="phaseList"
                >
            </pattern-list>
            <pattern-list
                v-else
                ref="boardCard"
                :cycle="crossStatusData ? crossStatusData.cycle : 0"
                :syncTime="crossStatusData ? crossStatusData.syncTime : 0"
                :controlData="controlData"
                :contrloType="contrloType"
                :localPatternList="allPatternList"
                :phaseList="phaseList"
                :showBarrier="true"
                :isPhase="false"
                :agentId="node.agentid"
                >
            </pattern-list>
            <!-- pattern list end -->
            </div>
        <!-- </el-col>
        <el-col :span='12' v-if='isShowVideo'>
          <Flv :curDevVideos='node.videos' :autoPlay='autoPlay'></Flv>
        </el-col>
      </el-row> -->
    <!-- </div> -->
  </div>
</template>

<script>
import { ExecuteViproute } from '../../../../api/service'
import { getTscControl } from '../../../../api/control'
import Flv from '../../../../components/Flvjs/index.vue'
import { getMessageByCode } from '../../../../utils/responseMessage'
import { getIntersectionInfo } from '../../../../api/template'
export default {
  name: 'nodeCard',
  components: {
    Flv
  },
  props: {
    node: {
      type: Object
    },
    tabName: {
      type: String,
      default: 'second'
    },
    isShowVideo: {
      type: Boolean,
      defaultValue: false
    }
  },
  computed: {
    patterData () {
      const res = this.allPatternList.filter(item => {
        return item.id === this.controlData.patternid
      })[0]
      return res
    }
  },
  watch: {
    phaseList: {
      handler: function (val, oldVal) {
        this.getPedPhasePos()
      },
      // 深度观察监听
      deep: true
    },
    'node.agentid': {
      handler: function (val) {
        this.getIntersectionInfo(val)
        // // 平台设备切换时行人横道切换
        // this.getPhase()
        // this.initData()
        // // 平台的配置软件中路口已设置渠化,总览界面默认显示渠化模式; 信号机的配置软件不做此逻辑处理
        // if (this.isfromatc === true) {
        //   this.getChannelizatonChart()
        // }
      },
      deep: true
    }
  },
  data () {
    return {
      controlData: {},
      checked: false,
      overlap: [],
      contrloType: '',
      narr: [],
      // patternList: [],
      // patternSelect: [], // 所有方案id
      // planPattern: {}, // 默认显示方案
      allPatternList: [], // 所有方案
      phaseList: [],
      crossStatusData: {},
      ParamsMode: new Map([[0, '自主控制'], [1, '本地手动'], [2, '平台控制'], [3, '配置软件控制'], [4, '遥控器控制'], [5, '黄闪器控制'], [6, '降级控制'], [7, '脚本控制'], [8, '算法控制']]),
      ParamsModeEn: new Map([[0, 'Autonomous Control'], [1, 'Local Manual'], [2, 'Platform Control'], [3, 'Configuration Software Control'], [4, 'Remote Control'], [5, 'Yellow Flasher Control'], [6, 'Degradation Control'], [7, 'Script Control'], [8, 'Algorithm Control']]),
      ParamsControl: new Map([[0, '多时段'], [1, '黄闪'], [2, '全红'], [3, '关灯'], [4, '步进'], [5, '定周期控制'], [6, '自适应'], [7, '协调感应控制'], [8, '方案选择控制'], [9, '方案生成'], [10, '无电缆控制'], [11, '有电缆控制'], [12, '行人过街控制'], [13, '方案恢复过渡'], [14, '相位驻留'], [15, '通道检测'], [16, '方向锁定'], [17, '韦伯斯特单点控制'], [18, '预留18'], [19, '感应式行人过街'], [20, '方案干预'], [100, '方案干预'], [21, '预留21'], [22, '相位锁定'], [23, '相位放行控制'], [24, '紧急控制'], [99, '设备维护']]),
      ParamsControlEn: new Map([[0, 'Multi Period'], [1, 'Yellow Flash Control'], [2, 'Red Control'], [3, 'Dark Control'], [4, 'Step'], [5, 'Fixed_Cycle Control'], [6, 'Free Control'], [7, 'Coordinated Induction Control'], [8, 'Pattern Selection Control'], [9, 'Adaptive Control'], [10, 'Wireless Control'], [11, 'Cable Control'], [12, 'Pedestrian Crossing Control'], [13, 'Pattern recovery'], [14, 'Phase dwell'], [15, 'Channel Detection'], [16, 'Direction lock'], [17, 'Webster Single Point Coordination'], [18, 'Reserving18'], [19, 'Inductive Pedestrian Crossing Control'], [20, 'Program Intervention'], [100, 'Program Intervention'], [21, 'Reserving21'], [22, 'Priority Control'], [23, 'Close Phase'], [24, 'Emergency Control'], [99, 'Device Mantenance']]),
      phaseType: new Map([[1, '红'], [2, '黄'], [3, '绿'], [4, '绿闪']]), // phaseType表示红，黄，绿
      phaseTypeEn: new Map([[1, 'Red'], [2, 'Yellow'], [3, 'Green'], [4, 'Greenclear']]), // phaseType表示红，黄，绿
      // up 冗余
      curControl: {
        curTime: 96,
        syncTime: 35,
        'agentid': 'gjnlahql',
        'desc': '方案1',
        'id': 1,
        'name': '广济南路爱河桥路，请勿修改通道参数',
        'isused': true,
        'forwardphaseid': 4,
        'forwardphasedirection': [9],
        'backphaseid': 2,
        'backphasedirection': [5, 6, 7],
        'distance': 0,
        'width': 45,
        'sortid': 0,
        'patternid': 1,
        'routeid': 115,
        'forwardphaseDesc': '相位4 北直行',
        'backphaseDesc': '相位2 西直行,西左转,西右转',
        'offset': 10,
        'cycle': 123,
        'patternId': 1,
        'patternDesc': '方案1',
        'phase': [
          {
            'id': 1,
            'direction': [
              1,
              2,
              3
            ],
            'peddirection': [
              3,
              4
            ],
            'mingreen': 5,
            'max1': 120,
            'max2': 180,
            'passage': 3,
            'phasewalk': 0,
            'pedclear': 0,
            'yellow': 3,
            'redclear': 0,
            'flashgreen': 0,
            'redyellow': 0,
            'ring': 1,
            'greenpulse': 5,
            'redpulse': 10,
            'vehiclethresh': 30,
            'pedestrianthresh': 30,
            'controltype': 0,
            'concurrent': [
              2
            ]
          },
          {
            'id': 2,
            'direction': [
              5,
              6,
              7
            ],
            'peddirection': [
              3,
              4
            ],
            'mingreen': 5,
            'max1': 120,
            'max2': 180,
            'passage': 3,
            'phasewalk': 0,
            'pedclear': 0,
            'yellow': 3,
            'redclear': 0,
            'flashgreen': 0,
            'redyellow': 0,
            'ring': 2,
            'greenpulse': 5,
            'redpulse': 10,
            'vehiclethresh': 30,
            'pedestrianthresh': 30,
            'controltype': 0,
            'concurrent': [
              1
            ]
          },
          {
            'id': 3,
            'direction': [
              13
            ],
            'peddirection': [
              1,
              2
            ],
            'mingreen': 5,
            'max1': 120,
            'max2': 180,
            'passage': 3,
            'phasewalk': 0,
            'pedclear': 0,
            'yellow': 3,
            'redclear': 0,
            'flashgreen': 0,
            'redyellow': 0,
            'ring': 1,
            'greenpulse': 5,
            'redpulse': 10,
            'vehiclethresh': 30,
            'pedestrianthresh': 30,
            'controltype': 0,
            'concurrent': [
              4,
              5
            ]
          },
          {
            'id': 4,
            'direction': [
              9
            ],
            'peddirection': [
              1,
              2
            ],
            'mingreen': 5,
            'max1': 120,
            'max2': 180,
            'passage': 3,
            'phasewalk': 0,
            'pedclear': 0,
            'yellow': 3,
            'redclear': 0,
            'flashgreen': 0,
            'redyellow': 0,
            'ring': 2,
            'greenpulse': 5,
            'redpulse': 10,
            'vehiclethresh': 30,
            'pedestrianthresh': 30,
            'controltype': 0,
            'concurrent': [
              3,
              6
            ]
          },
          {
            'id': 5,
            'direction': [
              14
            ],
            'peddirection': [

            ],
            'mingreen': 5,
            'max1': 120,
            'max2': 180,
            'passage': 3,
            'phasewalk': 0,
            'pedclear': 0,
            'yellow': 3,
            'redclear': 0,
            'flashgreen': 0,
            'redyellow': 0,
            'ring': 2,
            'greenpulse': 5,
            'redpulse': 10,
            'vehiclethresh': 30,
            'pedestrianthresh': 30,
            'controltype': 0,
            'concurrent': [
              6,
              3
            ]
          },
          {
            'id': 6,
            'direction': [
              10
            ],
            'peddirection': [

            ],
            'mingreen': 5,
            'max1': 120,
            'max2': 180,
            'passage': 3,
            'phasewalk': 0,
            'pedclear': 0,
            'yellow': 3,
            'redclear': 0,
            'flashgreen': 0,
            'redyellow': 0,
            'ring': 1,
            'greenpulse': 5,
            'redpulse': 10,
            'vehiclethresh': 30,
            'pedestrianthresh': 30,
            'controltype': 0,
            'concurrent': [
              4,
              5
            ]
          }
        ],
        'phaseList': [
          {
            'id': 1,
            'direction': [1, 2, 3],
            'peddirection': [3, 4],
            'mingreen': 5,
            'max1': 120,
            'max2': 180,
            'passage': 3,
            'phasewalk': 0,
            'pedclear': 0,
            'yellow': 3,
            'redclear': 0,
            'flashgreen': 0,
            'redyellow': 0,
            'ring': 1,
            'greenpulse': 5,
            'redpulse': 10,
            'vehiclethresh': 30,
            'pedestrianthresh': 30,
            'controltype': 0,
            'concurrent': [2]
          },
          {
            'id': 2,
            'direction': [5, 6, 7],
            'peddirection': [3, 4],
            'mingreen': 5,
            'max1': 120,
            'max2': 180,
            'passage': 3,
            'phasewalk': 0,
            'pedclear': 0,
            'yellow': 3,
            'redclear': 0,
            'flashgreen': 0,
            'redyellow': 0,
            'ring': 2,
            'greenpulse': 5,
            'redpulse': 10,
            'vehiclethresh': 30,
            'pedestrianthresh': 30,
            'controltype': 0,
            'concurrent': [1]
          },
          {
            'id': 3,
            'direction': [13],
            'peddirection': [1, 2],
            'mingreen': 5,
            'max1': 120,
            'max2': 180,
            'passage': 3,
            'phasewalk': 0,
            'pedclear': 0,
            'yellow': 3,
            'redclear': 0,
            'flashgreen': 0,
            'redyellow': 0,
            'ring': 1,
            'greenpulse': 5,
            'redpulse': 10,
            'vehiclethresh': 30,
            'pedestrianthresh': 30,
            'controltype': 0,
            'concurrent': [4, 5]
          },
          {
            'id': 4,
            'direction': [9],
            'peddirection': [1, 2],
            'mingreen': 5,
            'max1': 120,
            'max2': 180,
            'passage': 3,
            'phasewalk': 0,
            'pedclear': 0,
            'yellow': 3,
            'redclear': 0,
            'flashgreen': 0,
            'redyellow': 0,
            'ring': 2,
            'greenpulse': 5,
            'redpulse': 10,
            'vehiclethresh': 30,
            'pedestrianthresh': 30,
            'controltype': 0,
            'concurrent': [3, 6]
          },
          {
            'id': 5,
            'direction': [14],
            'peddirection': [],
            'mingreen': 5,
            'max1': 120,
            'max2': 180,
            'passage': 3,
            'phasewalk': 0,
            'pedclear': 0,
            'yellow': 3,
            'redclear': 0,
            'flashgreen': 0,
            'redyellow': 0,
            'ring': 2,
            'greenpulse': 5,
            'redpulse': 10,
            'vehiclethresh': 30,
            'pedestrianthresh': 30,
            'controltype': 0,
            'concurrent': [6, 3]
          },
          {
            'id': 6,
            'direction': [10],
            'peddirection': [],
            'mingreen': 5,
            'max1': 120,
            'max2': 180,
            'passage': 3,
            'phasewalk': 0,
            'pedclear': 0,
            'yellow': 3,
            'redclear': 0,
            'flashgreen': 0,
            'redyellow': 0,
            'ring': 1,
            'greenpulse': 5,
            'redpulse': 10,
            'vehiclethresh': 30,
            'pedestrianthresh': 30,
            'controltype': 0,
            'concurrent': [4, 5]
          }
        ],
        'rings': [
          [
            {
              'id': 1,
              'value': 60,
              'mode': 2,
              'desc': [
                {
                  'id': 1
                },
                {
                  'id': 2
                },
                {
                  'id': 3
                }
              ]
            },
            {
              'id': 3,
              'value': 43,
              'mode': 2,
              'desc': [
                {
                  'id': 13
                }
              ]
            },
            {
              'id': 6,
              'value': 20,
              'mode': 2,
              'desc': [
                {
                  'id': 10
                }
              ]
            }
          ],
          [
            {
              'id': 2,
              'value': 60,
              'mode': 2,
              'desc': [
                {
                  'id': 5
                },
                {
                  'id': 6
                },
                {
                  'id': 7
                }
              ]
            },
            {
              'id': 4,
              'value': 43,
              'mode': 2,
              'desc': [
                {
                  'id': 9
                }
              ]
            },
            {
              'id': 5,
              'value': 20,
              'mode': 2,
              'desc': [
                {
                  'id': 14
                }
              ]
            }
          ],
          [],
          []
        ],
        'ringCount': [1, 2]
      },
      isShowState: true,
      isShowMode: true,
      isShow: true,
      isBtnDisabled: false,
      autoPlay: true
    }
  },
  methods: {
    onCloseClick () {
      this.isShow = false
    },
    show () {
      this.isShow = true
    },
    getTscControl (res) {
      //   this.curControl = (res && res.data && res.data.data && res.data.data.data) ? res.data.data.data : null
      let resControl = (res && res.data && res.data.data && res.data.data.data) ? res.data.data.data : null
      this.$emit('getTscControl', res)
      // console.log('getTscControl', res)
      // console.log('getTscControl', JSON.stringify(resControl))
      // console.log('this.curControl', JSON.stringify(this.curControl))
      //   this.curControl.rings = resControl.rings
      //   this.curControl.phase = resControl.phase
      console.log('curControl', this.curControl)
      this.controlData = this.handleGetData(resControl)
      console.log('controlData', this.controlData)
      if (resControl) {
        this.crossStatusData = JSON.parse(JSON.stringify(resControl))
      } else {
        this.crossStatusData = {}
      }
    },
    executeViproute () {
      let reqData = {
        'agentid': this.node.agentid,
        'viprouteid': this.node.viprouteid,
        'operation': 1
      }
      if (this.node.state === 1) {
        reqData.operation = 0
      }
      // this.isBtnDisabled = true
      ExecuteViproute(reqData).then(res => {
        // this.isBtnDisabled = false
        if (!res.data.success) {
          this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
          return false
        }
        this.$emit('research')
      })
    },
    async getIntersectionInfo (agentid) {
      // 获取路口信息
      getIntersectionInfo(agentid).then(res => {
        this.allPatternList = res.data.data.param.patternList
        if (!this.allPatternList[0].contrloType && this.allPatternList[0].rings.length > 0) {
          this.contrloType = 'ring'
        } else if (!this.allPatternList[0].contrloType && this.allPatternList[0].rings.length === 0) {
          this.contrloType = 'stage'
        } else {
          this.contrloType = this.allPatternList[0].contrloType
        }
        this.phaseList = res.data.data.param.phaseList
      })
    },
    handleGetData (data) {
      let that = this
      if (data.name === '') {
        if (that.$i18n.locale === 'en') {
          data.name = 'Pattern' + data.patternid
        } else if (that.$i18n.locale === 'zh') {
          data.name = '方案' + data.patternid
        }
      }
      Object.keys(data).forEach(function (key) {
        if (that.$i18n.locale === 'en') {
          if (key === 'mode') {
            if (data[key] > 0 && data[key] < 6) {
              data[key] = that.ParamsModeEn.get(data[key])
            } else {
              data[key] = that.ParamsModeEn.get(0)
            }
          }
          // if (key === 'control') {
          //   data[key] = that.ParamsControlEn.get(data[key])
          // }
          if (key === 'phase' || key === 'overlap') {
            for (let val of data[key]) {
              val.typestr = that.phaseTypeEn.get(val.type)
              val.pedtypestr = that.phaseTypeEn.get(val.pedtype)
            }
          }
        } else if (that.$i18n.locale === 'zh') {
          if (key === 'mode') {
            if (data[key] > 0 && data[key] < 6) {
              data[key] = that.ParamsMode.get(data[key])
            } else {
              data[key] = that.ParamsMode.get(0)
            }
          }
          // if (key === 'control') {
          //   data[key] = that.ParamsControl.get(data[key])
          // }
          if (key === 'phase' || key === 'overlap') {
            for (let val of data[key]) {
              val.typestr = that.phaseType.get(val.type)
              val.pedtypestr = that.phaseType.get(val.pedtype)
            }
          }
        }
      })
      return data
    },
    getTag (row) {
      if (row.stateName === 'DOWN') {
        return {
          label: this.$t('openatc.devicemanager.offline'),
          type: 'info'
        }
      } else if (row.stateName === 'UP') {
        return {
          label: this.$t('openatc.devicemanager.online'),
          type: 'success'
        }
      } else {
        return {
          label: this.$t('openatc.devicemanager.fault'),
          type: 'danger'
        }
      }
    },
    getButtonType (node) {
      let res = 'warning'
      if (!node.state || node.state === 0) {
        res = 'primary'
      }
      return res
    },
    async getCrossStatusData (iframdevid) {
      let crossStatusData = {}
      await getTscControl(iframdevid).then((data) => {
        if (!data.data.success) {
          if (data.data.code === '4003') {
            this.$message.error(getMessageByCode(data.data.code, this.$i18n.locale))
            return
          }
          let parrenterror = getMessageByCode(data.data.code, this.$i18n.locale)
          if (data.data.data) {
            // 子类型错误
            let childErrorCode = data.data.data.errorCode
            if (childErrorCode) {
              let childerror = getMessageByCode(data.data.data.errorCode, this.$i18n.locale)
              this.$message.error(parrenterror + ',' + childerror)
            }
          } else {
            this.$message.error(parrenterror)
          }
          return
        }
        crossStatusData = JSON.parse(JSON.stringify(data.data.data.data))
      }).catch(error => {
        console.log(error)
      })
      return crossStatusData
    }
  }
}
</script>
<style scoped>
</style>
